<template>
  <div>
    <a-modal :width="1200" v-model:visible="showDetail" title="采购入库单详情" top="8vh" title-align="start" :footer="false" :mask-closable="false" @cancel="closedDialog">
      <div>
        <a-row>
          <a-col :span="8">
            <span>状态：</span>
            <span>{{ statusMap[currentItem.status] }}</span>
          </a-col>
          <a-col :span="8">
            <span>入库人：</span>
            <span>{{ currentItem.signUname }}</span>
          </a-col>
          <a-col :span="8">
            <span>入库时间：</span>
            <span>{{ $setTime(currentItem.gmtSign, 'YYYY/MM/DD HH:mm') }}</span>
          </a-col>
        </a-row>
        <a-row style="margin: 10px 0">
          <a-col :span="8">
            <span>入库仓：</span>
            <span>{{ currentItem.warehouseName }}({{ currentItem.warehouseCode }})</span>
          </a-col>
          <a-col :span="8">
            <span>入库单号：</span>
            <span class="highlight">{{ currentItem.billNo }}</span>
          </a-col>
          <a-col :span="8">
            <span>交货单号：</span>
            <span class="highlight">{{ currentItem.deliveryNo }}</span>
          </a-col>
        </a-row>
        <a-row style="margin: 10px 0">
          <a-col :span="8">
            <span>提交人：</span>
            <span>{{ currentItem.createUname }}</span>
          </a-col>
          <a-col :span="8">
            <span>提交时间：</span>
            <span>{{ $setTime(currentItem.gmtCreate, 'YYYY/MM/DD HH:mm') }}</span>
          </a-col>
        </a-row>
      </div>
      <a-tabs default-active-key="1">
        <a-tab-pane key="1" title="入库单明细">
          <a-table size="mini" class="table-normal-line show-border-table" :summary="true" style="margin-top: 10px" :pagination="false" :scroll="{ y: 'calc(84vh - 260px)' }" :data="currentItem.billItems">
            <template #columns>
              <a-table-column title="采购单号" :width="100">
                <template #cell="{ record }">
                  <span class="highlight">{{ record.purchaseNo }}</span>
                </template>
              </a-table-column>
              <a-table-column title="店铺" :width="100">
                <template #cell="{ record }">
                  <TextLimit :rows="2">{{ record.shopName }}</TextLimit>
                </template>
              </a-table-column>
              <a-table-column title="图片" :width="60">
                <template #cell="{ record }">
                  <ImgPopover :src="record.productImg">
                    <template #con>
                      <a-image width="40" height="40" fit="contain" :src="record.productImg" />
                    </template>
                  </ImgPopover>
                </template>
              </a-table-column>
              <a-table-column title="产品名称/SKU" :width="140">
                <template #cell="{ record }">
                  <TextLimit :rows="1">{{ record.productName }}</TextLimit>
                  <ShowSpuDetailBySku :val="record.sku" :showLimit="true" :rows="1" />
                </template>
              </a-table-column>
              <a-table-column data-index="msku" title="MSKU" :width="120" />
              <a-table-column data-index="cateName" title="产品类目" :width="70" />
              <a-table-column data-index="warehouseStayAmt" title="待入库数" :width="70" />
              <a-table-column data-index="warehouseRealAmt" title="已入库数" :width="70" />
              <a-table-column data-index="warehouseReturnAmt" title="退回数量" :width="70" />
              <a-table-column title="税率" :width="70">
                <template #cell="{ record }">
                  <p>{{ record.rate }}%</p>
                </template>
              </a-table-column>
              <a-table-column title="单件成本" :width="80">
                <template #cell="{ record }">
                  <p>￥{{ record.unitCosts }}</p>
                </template>
              </a-table-column>
              <a-table-column data-index="inventoryValue" title="入库货值" :width="80">
                <template #cell="{ record }">
                  <p>￥{{ record.inventoryValue }}</p>
                </template>
              </a-table-column>
              <a-table-column title="入库货位" :width="100">
                <template #cell="{ record }">
                  <div>{{ record.locationCode }}</div>
                </template>
              </a-table-column>
            </template>
            <template #summary-cell="{ column, record }">
              <p v-if="column.dataIndex == 'cateName'">合计</p>
              <p v-else-if="['warehouseStayAmt', 'warehouseRealAmt', 'warehouseReturnAmt'].includes(column.dataIndex)">{{ record[column.dataIndex] }}</p>
              <p v-else-if="['inventoryValue'].includes(column.dataIndex)">￥{{ record[column.dataIndex] }}</p>
            </template>
          </a-table>
        </a-tab-pane>
        <a-tab-pane key="2" title="操作日志">
          <a-table size="mini" style="margin-top: 10px" :loading="tableLoading" :data="logList" :scroll="{ y: 'calc(84vh - 300px)' }" class="table-singe-line show-border-table" :pagination="false">
            <template #columns>
              <a-table-column title="序号" :width="45">
                <template #cell="{ rowIndex }">
                  <p>{{ rowIndex + 1 }}</p>
                </template>
              </a-table-column>
              <a-table-column title="时间">
                <template #cell="{ record }">
                  <p>{{ $setTime(record.gmtCreate) }}</p>
                </template>
              </a-table-column>
              <a-table-column data-index="createUname" title="操作人" />
              <a-table-column data-index="eventName" title="事件" />
              <a-table-column data-index="eventMsg" title="描述" />
            </template>
          </a-table>
          <div class="pagination-footer" style="margin-top: 10px">
            <a-pagination size="mini" :total="total" :default-page-size="searchVal.pageSize" :current="searchVal.pageNum" :page-size-options="[20, 50, 100, 200, 500]" show-total show-page-size @page-size-change="sizeChange" @change="changePage" />
          </div>
        </a-tab-pane>
      </a-tabs>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue'
  import { findReceiptLogPage } from '@/api/purchase'

  onMounted(() => {
    getLogList()
  })
  const emit = defineEmits(['closed'])
  const props = defineProps({
    isShow: {
      type: Boolean,
      default: false,
    },
    currentItem: {
      type: Object,
      default: () => {},
    },
  })
  const statusMap = {
    0: '已拒收',
    10: '待入库',
    20: '完成入库',
  }
  const showDetail = ref(props.isShow)
  const logList = ref<Array<any>>([])
  const tableLoading = ref(false)
  const total = ref(0)
  let searchVal = ref<any>({
    billId: props.currentItem.id,
    pageSize: 20,
    pageNum: 1,
  })
  // 分页
  function changePage(val: number) {
    searchVal.value.pageNum = val
    getLogList()
  }
  function sizeChange(val: number) {
    searchVal.value.pageSize = val
    getLogList()
  }
  // 获取日志列表
  async function getLogList() {
    tableLoading.value = true
    const res: any = await findReceiptLogPage({ billId: props.currentItem.id })
    tableLoading.value = false
    total.value = res?.data?.total || 0
    logList.value = res?.data?.records || []
  }
  // 关闭
  function closedDialog() {
    showDetail.value = false
    emit('closed')
  }
</script>

<style lang="less" scoped></style>
